<template>
    <div>
        <el-card style="width: 100%;margin: 0;" shadow="always">
            <template #header>
                <h4>消息中心</h4>
            </template>
            <el-table :data="MessageData" style="width: 100%" max-height="800" @selection-change="handleSelectionChange"
                :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }">
                <el-table-column type="selection" width="55" />
                <el-table-column type="index" width="50" />
                <el-table-column property="text" label="内容" width="666" />
                <!-- <el-table-column property="type" label="消息类型" width="120" /> -->
                <el-table-column property="isCheck" label="查看状态" width="120">
                    <template #default="scope">
                        <el-tag :key="getTagKey(itemStatusArr, scope.row.isCheck)"
                            :type="getTagType(itemStatusArr, scope.row.isCheck)" effect="plain">
                            {{ getTagKey(itemStatusArr, scope.row.isCheck) }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column property="createdAt" label="创建日期" width="120" />
                <el-table-column property="updatedAt" label="修改日期" width="120" />
                <el-table-column label="操作" width="200">
                    <template #default="scope">
                        <el-button type="primary" @click="openDialog(scope.row.text), updateM()">查看</el-button>
                        <el-button type="danger" @click="deleteMg(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-divider />
            <el-button type="primary" @click="delList()">批量删除</el-button>
        </el-card>
        <!-- 查看 -->
        <el-dialog v-model="dialogForm" :title="dialogTitle" width="500">
            <el-divider />
            <p>{{ text }}</p>
            <el-divider />
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="UpdateMessage({})">确认</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { FindAllMessage, UpdateMessage, DeleteMessage, delMessages } from '../../api/message'
// element-plus导入组件
import { ElMessage, ElNotification } from 'element-plus';
import dayjs from "dayjs";
// 页面跳转
import { useRouter } from 'vue-router';
const router = useRouter();
const errorId = sessionStorage.getItem('userId')+''
if(errorId == undefined || errorId == ''){
    sessionStorage.setItem('error','not')
    router.push("/LimitsAuthority")
}

const MessageData = ref([])
const findAll = () => {
    FindAllMessage({userId: (Number)(errorId)}).then((res: any) => {
        if (res.code == 2000) {
            for (let i = 0; i < res.data.length; i++) {
                res.data[i].createdAt = dataFormat(res.data[i].createdAt)
                res.data[i].updatedAt = dataFormat(res.data[i].updatedAt)
            }
            MessageData.value = res.data
        }
    })
}
findAll()
const text = ref('')
const idList = ref([] as any[])
const updateM = () => {
    UpdateMessage({ isCheck: 1 }).then((res: any) => {
        if (res.code == 2000) {
            ElMessage.success("已确认");
            dialogForm.value = false
            findAll()
        } else {
            ElMessage.error(res.message);
        }
    })
}
const deleteMg = (mId: any) => {
    DeleteMessage({ id: mId }).then((res: any) => {
        if (res.code == 2000) {
            ElNotification({
                title: '成功',
                message: '删除成功',
                type: 'success',
            });
            dialogForm.value = false
            findAll()
        } else {
            ElMessage.error(res.message);
        }
    })
}
const handleSelectionChange = (row: any[]) => {
    idList.value = row.map((item: any) => item.id)
}
const delList = () => {
    if (idList.value.length === 0) {
        ElMessage.warning("请至少选择一条记录进行批量删除");
        return;
    }
    let idStr = ref('')
    for (let i = 0; i < idList.value.length; i++) {
        idStr.value += idList.value[i] + ','
    }
    delMessages({ ids: idStr.value }).then((res: any) => {
        if (res.code == 2000) {
            ElNotification({
                title: '成功',
                message: '批量删除成功',
                type: 'success',
            });
            findAll()
        } else {
            ElMessage.error(res.message);
        }
    })
}

// 抽屉参数
const dialogForm = ref(false)
const dialogTitle = ref('消息详情')
const openDialog = (dialogData: string) => {
    dialogForm.value = true
    text.value = dialogData
}
// 消息状态参数
const itemStatusArr = [
    {
        value: 0,
        label: '确认',
        type: 'primary',
    },
    {
        value: 1,
        label: '已确认',
        type: 'info',
    },
]
// 遍历数组
const getTagType = (itemTypeArr: any, value: any) => {
    for (let i = 0; i < itemTypeArr.length; i++) {
        if (itemTypeArr[i].value == value) {
            return itemTypeArr[i].type
        }
    }
}
const getTagKey = (itemTypeArr: any, value: any) => {
    for (let i = 0; i < itemTypeArr.length; i++) {
        if (itemTypeArr[i].value == value) {
            return itemTypeArr[i].label
        }
    }
}
// 时间格式化函数
const dataFormat = (data: any) => {
    return dayjs(data).format("YYYY-MM-DD HH:mm:ss");
}
</script>

<style scoped></style>